<template>
  <div>
    <van-nav-bar :border="false" fixed title="兑换会员" left-arrow @click-left="GOback" placeholder />
    <p class="buy_for">
      成功兑换后将关联到当前帐号：<span>{{UserData.username}}</span>
    </p>
    <van-form @submit="onSubmit">
      <van-field v-model="cardNumber" name="卡号" placeholder="请输入10位卡号" />
      <van-field v-model="camilo" name="卡密" placeholder="请输入6位卡密" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" v-if="cardNumber.length==10&&camilo.length==6">兑换</van-button>
        <van-button round block type="info" native-type="submit" :disabled="true" v-else>兑换</van-button>
      </div>
    </van-form>
    <van-dialog v-model="show1" confirmButtonColor="#3199e8">
      <template #default>
        <div class="tip_icon">
          <span></span>
          <span></span>
        </div>
        <p class="tip_text">{{message}}</p>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      cardNumber: '',
      camilo: '',
      show1: false,
      // 兑换失败
      message: ''
    }
  },
  computed: {
    ...mapState(['UserData'])
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    //发起兑换会员请求
    async onSubmit() {
      const id = window.sessionStorage.getItem('user_id')
      const { data: res } = await this.reques.post(`member/v1/users/${id}/delivery_card/physical_card/bind`, {
        number: this.cardNumber,
        password: this.camilo
      })
      if (res.message) {
        this.message = res.message
        this.show1 = true
      }
    }
  },
  mounted() {
    if (window.sessionStorage.getItem('user_id')) {
      this.$store.dispatch('getUser')
    }
  }
}
</script>

<style lang="less" scoped>
</style>